<template>
	<div class="reset-password bg-f5">
		<template v-if="reset_psw">
			<section class="replace"  v-if="show_view">
				<p class="w92 auto black fs12 mt35 mb15">通过手机号接收验证码重置密码</p>
				<ul class="bg-white container">
					<li class="pt15 pb15 border-b layout">
						<label class="fs14 black mr30" for="">+86</label>
						<input class="fs12 c85 flex_1" type="number" placeholder="请输入手机号码" v-model="phone_form.phone"> 
					</li>
					<li class="pt10 pb10 layout">
						<label class="fs12 black mr30 block" for="" style="width:23.73px"></label>
						<input class="fs12 c85 flex_1" type="number" placeholder="请输入验证码" v-model="phone_form.code">
						<button class="border fs10 subject pt5 pb5 pl5 pr5 radius" style="border-color:#ea200" @click="code(1)">
							<template v-if="phone_sending">{{ phone_minute }} s</template>
							<template v-else>获取验证码</template>
						</button> 
					</li>
				</ul>	
				<button class="btn-button radius block auto fs18 pt10 pb10" style="width:80%;margin-top:30%" :class="{ on : boolean }" @click="verification">下一步</button>	
				<p class="align-center fs12 mt25" style="color:#1d97ff;" @click="show_view = false">通过邮箱找回密码</p>
			</section>
			<section class="replace" v-else>
				<p class="w92 auto black fs12 mt35 mb15" >通过邮箱接收验证码重置密码</p>
				<ul class="bg-white container">
					<li class="pt15 pb15 border-b layout">
						<input class="fs12 c85 flex_1" type="text" placeholder="请输入您的邮箱账号" v-model="email_form.email"> 
					</li>
					<li class="pt10 pb10 layout">
						<input class="fs12 c85 flex_1" type="number" placeholder="请打开邮箱查收您的验证码" v-model="email_form.code">
						<button class="border fs10 subject pt5 pb5 pl5 pr5 radius" style="border-color:#ea2000" @click="code(2)">
							<template v-if="email_sending">{{ email_minute }} s</template>
							<template v-else>获取验证码</template>
						</button> 
					</li>
				</ul>
				<button class="btn-button radius block auto fs18 pt10 pb10" style="width:80%;margin-top:30%" :class="{ on : boolean }"  @click="verification">下一步</button>	
				<p class="align-center fs12 mt25" style="color:#1d97ff;" @click="show_view = true">通过手机号找回密码</p>
			</section>
		</template>
		<template v-else>
			<section class="password" v-if="affirm">
				<p class="w92 auto black fs12 mt35 mb15">请输入您的密码</p>
				<ul class="bg-white container" v-if="show_view">
					<li class="pt15 pb15 border-b layout">
						<input class="fs12 c85 flex_1" type="password" placeholder="请输入新密码" v-model="password"> 
					</li>
					<li class="pt15 pb15 layout">
						<input class="fs12 c85 flex_1" type="password" placeholder="请再次输入新密码" v-model="phone_form.password">
					</li>
				</ul>	
				<ul class="bg-white container" v-else>
					<li class="pt15 pb15 border-b layout">
						<input class="fs12 c85 flex_1" type="password" placeholder="请输入新密码" v-model="password"> 
					</li>
					<li class="pt15 pb15 layout">
						<input class="fs12 c85 flex_1" type="password" placeholder="请再次输入新密码" v-model="email_form.password">
					</li>
				</ul>	
				<button class="btn-button white radius block auto fs18 pt10 pb10" style="width:80%;margin-top:30%" :class="{ on : reset }" @click="submit">确定</button>	
			</section>
			<section class="success pt35" v-else>
				<div class="align-center">
					<img style="width:80px" src="../../../assets/img9.png" alt="">
					<p class="fs18 mt20" style="color:#32bd65">密码更改成功</p>
				</div>
				<!-- <button class="bg-subject white radius block auto fs18 pt10 pb10" style="width:80%;margin-top:50%">立即登录</button>	 -->
			</section>
		</template>
	</div>
</template>

<script>
	import { getEmailCode, getCode } from '@/api';
	import { validate } from '@/utils';
	export default{
		data()
		{
			return{
				phone_minute : 60,
				email_minute : 60,
				email_sending : false,
				phone_sending : false,
				show_view 	: true,
				verify  	: false,
				reset_psw   : true,
				affirm      : true,
				password    : '',
				email_form 	: {
					email 		: '',
					code  		: '',
					password    : '',
				},
				phone_form 	: {
					code  		: '',
					password    : '',
					phone 		: '',
				}

			}
		},
		watch:
		{
			show_view()
			{
				this.email_form.email = '';
				this.email_form.code  = '';
				this.phone_form.phone = '';
				this.phone_form.code  = '';
			},
		},
		computed:
		{
			boolean()
			{
				var boolean = false;

				
 				if(this.phone_form.phone && this.phone_form.code || this.email_form.email && this.email_form.code)
				{
					this.verify = true;
					boolean = true;
				}
				else
				{
					this.verify = false;
					boolean = false;
				}

				return boolean;
			},
			reset()
			{
				var reset = false;
				if( this.password && this.phone_form.password || this.email_form.password )
				{
					this.verify = true;
					reset = true;
				}
				else
				{
					this.verify = false;
					reset = false;
				}
				return reset;
			}
		},
		methods:
		{
			verification()
			{
				if(!this.verify)
					return;
				else{
					if(this.show_view)
					{
						if(!validate('phone',this.phone_form.phone) && !validate('code',this.phone_form.code))
							this.reset_psw = false;
					}
					else
					{
						if(!validate('phone',this.email_form.email) && !validate('code',this.email_form.code))
							this.reset_psw = false;
					}
				}
			},
			submit()
			{	
				if(this.show_view){
					if(!validate('password2',this.phone_form.password,this.password) && !validate('password',this.phone_form.password) ){
						this.$http.post('/setting/phonereset',this.phone_form,{ headers : { Authorization : this.$route.query.token } }).then(res => {
							this.affirm = false;
						})
					}
				}
				else
				{
					if(!validate('password2',this.email_form.password,this.password) &&!validate('password',this.email_form.password)){
						this.$http.post('/bind/vaerify',this.email_form,{ headers : { Authorization : this.$route.query.token } }).then(res => {
							this.affirm = false;
						})
					}
				}
			},
			code(type)
			{	
				if(type == 1){
					getCode(this.phone_form.phone).then(res=>{
						this.phoneCountDown();
					})
				}
				else
					getEmailCode(this.email_form.email,0).then(res=>{
						this.emailCountDown();
					})
			},
			phoneCountDown(){
				this.phone_sending = true;
				var clear = setInterval( () => {
					if( this.phone_minute > 0 ){
						--this.phone_minute;
					}else{
						clearInterval(clear);
						this.phone_sending = false;
						this.phone_minute = 60;
					}
				}, 1000);
			},
			emailCountDown(){
				this.email_sending = true;
				var clear = setInterval( () => {
					if( this.email_minute > 0 ){
						--this.email_minute;
					}else{
						clearInterval(clear);
						this.email_sending = false;
						this.email_minute = 60;
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="less">
	.reset-password{
		.on{
			background-color:#ff0036;
			color: white;
		}
	}
</style>
